<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.commentSection {
  width: 10rem;
  height: 13rem;
  background-color: $color-white;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(22, 24, 35, 0.98);

  .commentSection-header {
    width: 10rem;
    height: .8533rem;
    @include flex-space-between-center;
    color: $color-comment-section;
    position: absolute;
    top: 0;
    left: 0;

    i {
      font-size: .48rem;
      padding-right: .2rem;
    }

    h2 {
      font-size: .32rem;
    }
  }

  .commentSection-content {
    width: 10rem;
    height: 11rem;
    margin-top: .8533rem;

    ul {
      width: 10rem;
      height: 11rem;
      overflow: auto;

      li {
        width: 10rem;
        height: 1.84rem;

        .commentSection-content-item {
          width: 10rem;
          height: 1.84rem;
          @include flex-space-around-center;

          .commentSection-content-item-avatar {
            width: 1.0667rem;
            height: 1.0667rem;
            border-radius: 50%;
            margin-left: .2667rem;

            img {
              width: 1.0667rem;
              height: 1.0667rem;
              border-radius: 50%;
            }
          }

          .commentSection-content-item-info {
            width: 6.9333rem;
            height: 1.28rem;
            padding: .2667rem;
            @include flex-justify-center;
            flex-direction: column;

            h3 {
              font-size: .32rem;
              color: $color-comment-section;
            }

            p {
              font-size: .3733rem;
              color: $color-white;
            }

            span {
              font-size: .32rem;
              color: $color-comment-section;
            }
          }

          .commentSection-content-item-operation {
            width: 1.1733rem;
            height: 1.8133rem;
            @include flex-align-center;
            flex-direction: column;

            i {
              font-size: .48rem;
              margin-top: .2667rem;
              color: $color-comment-section;
              transition: all 0.3s ease-in-out;

            }

            p {
              font-size: .32rem;
              color: $color-comment-section;
            }
          }
        }
      }
    }
  }

  .commentSection-buttom {
    width: 10rem;
    height: 1.1733rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: $color-comment-section-buttom;
    @include flex-space-between-center;
    background-color: #1a1b20;

    .commentSection-buttom-left {
      width: 7.6rem;
      height: 1.1733rem;

      input {
        width: 7.6rem;
        height: 1.1733rem;
        background-color: #1a1b20;
        border: none;
        color: $color-white;
        font-size: .32rem;
        padding-left: .2667rem;
        @include input-focus-outline-none;
      }
    }

    .commentSection-buttom-right {
      width: 2.3467rem;
      height: 1.1733rem;
      display: flex;

      i {
        width: 1.1733rem;
        display: inline-block;
        height: 1.1733rem;
        color: $color-white;
        font-size: .4267rem;
        @include flex-center;
      }

    }
  }
}

.aixinactive {
  color: red !important;
  transition: all 0.3s ease-in-out;
}

@keyframes comment-section-fade-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comment-section-enter-active {
  animation: comment-section-fade-in 0.3s ease-in-out;
}

@keyframes comment-section-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.comment-section-leave-active {
  animation: comment-section-fade-out 0.3s ease-in-out;
}
</style>
<template>
  <Transition name="comment-section">
    <teleport to="body" v-if="showComment">
      <div class="commentSection">
        <div class="commentSection-header">
          <div>

          </div>
          <h2>
            64条评论
          </h2>
          <i @click="isShowComment" class="iconfont icon-cuowuguanbiquxiao"></i>
        </div>
        <div class="commentSection-content">
          <ul>
            <li v-for="item in videoCopy" :key="item.id">
              <div class="commentSection-content-item">
                <div class="commentSection-content-item-avatar">
                  <img :src="`http://43.138.15.137:3000${item.Comment.userAvatar}`" alt="">
                </div>
                <div class="commentSection-content-item-info">
                  <h3>
                    @ {{ item.Comment.userNickname }}
                  </h3>
                  <p>
                    {{ item.Comment.commentContent }}
                  </p>
                  <span>
                    {{ item.Comment.createdAtTime }}
                  </span>
                </div>
                <!-- 评论操作 -->
                <div class="commentSection-content-item-operation">
                  <i class="iconfont icon-aixin1" @click="likeComment(item.Comment.videoId, item.Comment.commentId)"
                    :class="{ 'aixinactive': item.Comment.isLiked }"></i>
                  <p :class="{ 'aixinactive': item.Comment.isLiked }">{{ item.likeNum }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="commentSection-buttom">
          <div class="commentSection-buttom-left">
            <input type="text" name="" id="" placeholder="有爱评论，说点儿好听的~（长按评论回复）" v-model="commentContent">
          </div>
          <div class="commentSection-buttom-right">
            <i class="iconfont icon-aite"></i>
            <i class="iconfont icon-dui" @click="commentVideo"></i>
          </div>
        </div>
      </div>
    </teleport>
  </Transition>
</template>
<script setup>
import { formatDateTime } from '@/utils/data';
import { likeCommentAPI, commentVideoAPI } from '@/api/home/Home';
import { useUserStore } from '@/store/modules/user/user';

const userStore = useUserStore();
const props = defineProps({
  showComment: {
    type: Boolean,
    default: false
  },
  video: {
    type: Array,
    default: () => []
  }
})
const videoCopy = ref({});
const commentContent = ref('');
watch(() => props.video, (newVal) => {
  videoCopy.value = newVal;
  videoCopy.value.forEach(element => {
    element.Comment.createdAtTime = formatDateTime(element.Comment.createdAt);
    element.Comment.isLiked = false;
  });
  console.log(videoCopy.value);
});


const emit = defineEmits(['show', 'comment-success']);
const isShowComment = () => {
  emit('show');
}
const likeComment = async (videoId, commentId) => {
  try {
    const res = await likeCommentAPI(userStore.userInfo.userId, videoId, commentId);
    console.log(res);
    if (res.code === 200) {
      videoCopy.value.forEach(element => {
        if (element.Comment.commentId === commentId) {
          element.Comment.isLiked = !element.Comment.isLiked;
          element.likeNum = Number(element.likeNum);
          element.likeNum += element.Comment.isLiked ? 1 : -1;
        }
      });
    }
  } catch (error) {
    console.error('点赞评论请求出错:', error);
  }
}
// 评论视频
const commentVideo = async () => {
  if (commentContent.value === '') {
    return;
  }
  try {
    const res = await commentVideoAPI({
      fromUserId: userStore.userInfo.userId,
      replyId: '',
      content: commentContent.value,
      toVideoId: videoCopy.value[0].Comment.videoId
    });
    console.log(videoCopy.value[0].Comment.videoId);

    console.log(res);
    if (res.code === 200) {
      commentContent.value = '';
      emit('comment-success');
    }
  } catch (error) {
    console.error('评论视频请求出错:', error);
  }
}
</script>